<template>
    <div class="_tabs">
        <Tabs
            v-model:activeKey="actKey"
            hide-add
            type="editable-card"
            @tabClick="handleTabClick"
            @edit="handleTabRemove">
            <TabPane
                v-for="item in tabsList"
                :key="item.key"
                :tab="item.title"
                :closable="item.closable">
            </TabPane>
        </Tabs>
    </div>
</template>

<script lang="jsx" setup>
import { ref, watch, onMounted, nextTick, computed } from 'vue'
import { Tabs, TabPane } from 'ant-design-vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const store = useStore()


const actKey = ref('')
const tabsList = computed(() => {
    let tabsList = store.state.tabs.tabsList
    tabsList.forEach(item => {
        item.key = item.name
        item.closable = item.name == 'baseHome' ? false : true
    })
    return tabsList
})


watch(route, (val) => {
    // console.log(val);
    setTabs({
        name: val.name,
        title: val.meta.title,
        path: val.fullPath,
        // 是否为详情页，详情页从在当前科目页旁边打开，其他的就是从科目列表最尾巴打开
        isDetail: !!Object.keys(val.params).length || !!Object.keys(val.query).length
    })
    actKey.value = route.name
})

onMounted(() => {
    nextTick(() => {
        setTabs({
            name: route.name,
            title: route.meta.title,
            path: route.fullPath
        })
        actKey.value = route.name
    })
})

function setTabs(rotue) {
    // console.log(store);
    store.dispatch('tabs/routerPage', rotue)
}

function handleTabClick(e) {
    // console.log(e);
    let act = store.state.tabs.tabsList.find(i => i.name == e)
    router.push(act.path)
}

function handleTabRemove(e) {
    router.removeTab(e)
    // return
    // let tabsList = store.state.tabs.tabsList
    // let index = tabsList.findIndex(i => i.name == e)
    // if(actKey.value == tabsList[index].name) {
    //     if(tabsList.length > 1) {
    //         let info;
    //         if(index == 0) {
    //             info = tabsList[index + 1]
    //         } else {
    //             info = tabsList[index - 1]
    //         }
    //         router.push(info.path)
    //     } else {
    //         // this.returnHomePage()
    //     }
    // }
    // // console.log(tabsList[index].name);
    // store.commit('tabs/REMOVE_TABS_LIST', tabsList[index].name)
}




</script>

<style lang="less" scoped>
._tabs{
    :deep(.ant-tabs-nav) {
        margin-bottom: 0;
        zoom: 0.9;
        .ant-tabs-tab{
            margin-right: 2px;
            // background: #f5f5f5;
        }
        .ant-tabs-tab-active{
            background: #f5f5f5;
            font-weight: bold;
            border-color: #f5f5f5;
        }
        .ant-tabs-nav-operations{
            display: none!important;
        }
    }
}

</style>
